@import './../../../../scss/colors.scss';

$content-witdh: 1100px;
$header-height: 100px;
$footer-height: 100px;
$steps-icoin-default-color: rgba(204,204,204,1);
$input-heigth: 52px;
$default-font-size: 16px;
$dropdown-menu-color: rgba(157,208,255,1);
$layout-color: rgba(233, 234, 238, 1);
$content-flux-witdh: 444px;

nz-layout {
    background: {
        color: $layout-color;
    };
    width: 100%;
    height: 100%;
    
    nz-header {
        background: {
            color: $primary-color;
        };

        .header {
            display: flex;
            margin: 0 auto;
            width: $content-witdh;

            .dropdown {
                color: $dropdown-menu-color;
                width: 31px;
                height: 16px;
                opacity: 0.8;
                font-size: 16px;
                font-family: Hiragino Sans GB;
                letter-spacing: 0px;
            }
        }
    }

    nz-content {
        // margin: 0 auto;
        // height: $footer-height;
        // min-height: 800px;
        .content {
            margin: 0 auto;
            background: $bg-color;
            width: $content-witdh;
            // height: 100%;
            // min-height: 750px;
            
            .content-header {
                background: {
                    color: $sider-bg-color;
                }
                height: 127px;
                display: -webkit-box;
                -webkit-box-pack:center;
                -webkit-box-align:center;
                -webkit-box-orient: vertical;
                text-align: center;
                .content-steps {
                    margin: 0 auto;
                    width: $content-flux-witdh;
                    
                    
                }
            }

            .content-body {
                min-height: 625px;
                h1 {
                    // width: 118px;
                    height: 27px;
                    opacity: 1;
                    font-size: 30px;
                    font-family: Hiragino Sans GB;
                    color: $fort-color;
                    letter-spacing: 0px;
                }

                .form-content-input-account,  .form-content-change-password, .form-content-change-success {
                    width: $content-flux-witdh;
                    margin: {
                        top: 65px;
                        left: auto;
                        right: auto;
                    }
                    text-align: left;
                }
                .form-content-input-account {
                    // margin: 0 auto;
                    // width: $content-flux-witdh;
                    // margin: {
                    //     top: 65px;
                    //     left: auto;
                    //     right: auto;
                    // }
                    // text-align: left;

                    

                    .tab-line {
                        margin: { 
                            top: 74px;
                        }
                    }

                    .form-line {
                        margin: { 
                            top: 30px;
                        }
                    }
                }

                .form-content-change-password {

                    .button-link {
                        color: $primary-color;
                    
                        background: {
                            color: transparent 
                        }
                        margin: {
                            left: 2em;
                            right: 2em;
                        }
                        font-weight: 300;
                    }

                    .password-change-label {
                        margin: {
                            top: 25px;
                        }

                        .password-change-label-title {
                            color: $span-color;
                        }

                        .password-change-label-title-small {
                            margin: {
                                top: -10px;
                            }
                        }
                    }
                }

                .form-content-change-success {
                    text-align: center;
                    .icon-success {
                        margin: auto;
                        display: inline-block;
                        font: normal normal normal 14px/1 FontAwesome;
                        font-size: 2em;
                        text-rendering: auto;
                        -webkit-font-smoothing: antialiased;
                        background: {
                            image: url('/assets/img/success.png');
                            size: 100% 100%;
                            repeat: no-repeat;
                        }
                        height: 70px;
                        width: 70px;
                        text-align: center;
                    }

                    .label-success {
                        // width: 141px;
                        // width: 118px;
                        margin: {
                            top:21px;
                        }
                        height: 19px;
                        opacity: 1;
                        font-size: 20px;
                        font-family: Hiragino Sans GB;
                        color: rgba(51,51,51,1);
                        letter-spacing: 0px;
                    }
                
                }
            }
        }
    }

    nz-footer {
        height: $footer-height;
        background: {
            color: $layout-color;
        };
        padding: {
            top: 0px;
            // bottom: 0px;
        }
        .footer {
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
            -webkit-box-orient: vertical;
            text-align: center;
            width: $content-witdh;
            height: $footer-height;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            background: {
                color: $sider-bg-color;
            }
        }
    }

}

.form-tabsset {
    // display: inline-block;
    display: flex;
    // margin: {
    //     top: 42px;
    // }
    .form-tabs {
       
        .form-tabs-title {
            width: 45px;
            height: 19px;
            opacity: 1;
            font-size: 20px;
            font-family: Hiragino Sans GB;
            line-height: 10px;
            letter-spacing: 0px;

        }

        .form-tabs-title-active {
            color: $tabs-active-color;
        }

        .form-tabs-title-active-bottom {
            background: {
                color: $tabs-active-color;
            }
            height: 4px;
            width: 16px;
            margin: 0 auto;
            margin: {
                top: 12px;
            }
            border-radius: 4px;
            
        }

        &:nth-child(2) {
            margin: {
                left: 50px;
            }
        }
         
        display: inline;
    }
}

input {
    height: $input-heigth;
    font-size: $default-font-size;
}

label {
    height: 16px;
    opacity: 1;
    font-size: $default-font-size;
    font-family: Hiragino Sans GB;
    color: $fort-color;
    line-height: 10px;
    letter-spacing: 0px;
}

.submit-button-group {
    text-align: center; 
    margin-top: 36px
}

.submit-button {
    text-align: center; 
    margin-top: 32px;
    width: 156px;
    height: 36px;
    opacity: 1;
    background: $primary-color;

    // width: 47px;
    // height: 16px;
    opacity: 1;
    font-size: 16px;
    font-family: Hiragino Sans GB;
    color: $bg-color;
    letter-spacing: 0px;

    &:disabled {
        background: $disable-color;
 
    }
}